<style lang="less">
  .ivu-poptip-rel{
    width: 100%;
  }
</style>
<template>
  <div class="tem-div">
    <!--搜索-->
    <Card class="tem-card">
      <div class="search-item" :style="searchItemStyle">
        <Form ref="searchForm" label-position="right" inline :label-width="60" class="frm-search">
          <FormItem label="车牌号">
            <i-input placeholder="车牌号" v-model="searchData.carNumber"></i-input>
          </FormItem>
          <FormItem label="司机姓名">
            <i-input placeholder="司机姓名" v-model="searchData.name"></i-input>
          </FormItem>
          <!-- <FormItem label="车队">
            <i-input placeholder="车队" v-model="searchData.carType"></i-input>
          </FormItem> -->
          <FormItem label="车挂类型">
            <i-select placeholder="车挂类型" clearable v-model="searchData.usetype">
              <template v-for="item in carTypeArray">
                <i-option :value="item.label" :key="item.label">{{item.label}}</i-option>
              </template>
            </i-select>
          </FormItem>
          <FormItem label="业务类型">
            <i-select placeholder="车辆业务类型" clearable v-model="searchData.businessType">
              <template v-for="item in businessTypeArray">
                <i-option :value="item.label" :key="item.value">{{item.label}}</i-option>
              </template>
            </i-select>
          </FormItem>
        </Form>
      </div>
      <div class="search-btn">
        <hy-icon-btn @click="changeSearchDiv" :text="searchDiv?'收起更多':'展开更多'" :iconType="searchDiv?'chevron-up':'chevron-down'" iconSize="12"></hy-icon-btn>
        <Button type="primary" @click="search(1)" icon="search" :loading="searchListLoading">搜索</Button>
        <i class="search-i"></i>
        <Button class="search-btn-plus" type="ghost" v-btnAuth="{code: 'userAdd'}" icon="plus" @click="() => this.$router.push('/position/carBaseInfo/carAddorEdit')">新增</Button>
      </div>
    </Card>
    <!--按钮-->
    <!--<Card class="tem-card">
      <div style="text-align: left">
        <i-button v-btnAuth="{code: 'carAdd'}" @click="() => this.$router.push('/position/carBaseInfo/carInfo')">新增</i-button>
      </div>
    </Card>-->
    <!--表格-->
    <Card class="tem-card">
      <!--table部分-->
      <Table border :columns="columnsTitle" :loading="searchListLoading" :data="list" @on-selection-change="handleSelectionChange"></Table>
      <br>
      <!-- 分页 -->
      <Page :total="totalElement"
            :current="searchData.pageNum"
            size="small"
            show-elevator
            show-sizer
            show-total
            style="text-align: right;"
            @on-change="search"
            @on-page-size-change="pageSizeChange"
            :page-size-opts="pageSizeOpts"
      ></Page>
    </Card>
  </div>
</template>
<script>
  import fetch from './service';
  import list from '@/js/mixins/list';

  export default {
    components: {},
    mixins: [list],
    data () {
      return {
        loading: false,
        // 查询条件
        searchObj: {
        },
        columnsTitle: [
          {
            key: 'carnum',
            title: '车牌号',
            width: 120
          },
          {
            key: 'axleNumber',
            title: '车轴',
            width: 120
          },
          {
            key: 'hangingType',
            title: '车挂车型',
            width: 120
          },
          {
            key: 'usetype',
            title: '车挂类型',
            width: 120
          },
          {
            title: '主驾司机',
            width: 120,
            render: (h, params) => {
              return (params.row.mainDriverInfo !== null ? params.row.mainDriverInfo.name + ' ' + params.row.mainDriverInfo.phone : null);
            }
          },
          {
            key: 'orgname',
            title: '所属机构'
          },
          {
            key: 'length',
            title: '车长(米)'
          },
          {
            key: 'carriagetype',
            title: '厢型'
          },
          {
            key: 'usetype',
            title: '挂车类型'
          },
          {
            key: 'businessType',
            title: '车辆业务类型'
          },
          {
            title: '操作',
            key: 'action',
            width: 180,
            fixed: 'right',
            align: 'center',
            render: (h, params) => {
              return h('div', [
                this._hyTool.createIconBtn(h, params, this.editItem, '编辑', 'edit', 20, {color: '#2db7f5'}, 'carEdit'),
                this._hyTool.createIconBtn(h, params, this.deleteItem, '删除', 'trash-a', '', {color: 'red'}, 'carDelete')
              ]);
            }
          }
        ],
        carTypeArray: [
          {
            value: '1',
            label: '6位标'
          },
          {
            value: '2',
            label: '12位标'
          },
          {
            value: '3',
            label: '13位标'
          },
          {
            value: '4',
            label: '16位标'
          },
          {
            value: '5',
            label: '18位T'
          },
          {
            value: '6',
            label: '21位T'
          }
        ],
        businessTypeArray: [
          {
            value: '1',
            label: '自营'
          },
          {
            value: '2',
            label: '连营'
          },
          {
            value: '3',
            label: '租用'
          }
        ]
      };
    },
    created () {},
    methods: {
      _getList () {
        // 作用合并搜索条件
        fetch.getList(Object.assign(this.searchData, this.searchObj)).then(this.callback);
      },
      editItem (row) {
        this.$router.push({
            path: '/position/carBaseInfo/carAddOrEdit',
            query: {
              id: row.id
            }
        });
      },
      deleteItem (row) {
        this.$Modal.confirm({
          title: '提示',
          content: '是否删除车辆信息：' + row.carnum,
          onOk: () => {
            let payload = {id: row.id};
            fetch.deleteApi(payload).then((data) => {
              this.$Notice.success({title: '删除成功'});
              this.search();
            });
          }
        });
      }
    }
  };
</script>
